<template>
	<div class="full-height">
		<van-nav-bar :title="title" left-arrow @click-left="$utils.back($route.path)" right-text="添加房间"
			@click-right="onClickRight" />
		<!-- 搜索栏 -->
		<div class="pd-24 bg-white ">
			<div class="bg-white pd-24 flex-v-c pos-r">
				<van-field v-model="searchKey" class="flex-1" clearable placeholder="搜索房间号/房间名称" left-icon="search"
					@click-left-icon="search" @keyup.enter="search" />
				<div class="pos-a right-20 fs-26" @click="search">搜索</div>
			</div>
		</div>
		<van-tabs v-model:active="active" @change="tabChange" class="pb-150">
			<van-tab :title="item.title" v-for="(item, index) in tabs" :key="index">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="moreData">
					<div class="roomList bg-white">
						<div v-for="(items, indexs) in roomList" :key="indexs" class="mt-24 fs-24 br-8 van-clearfix room tac"
							:class="isActive === indexs ? 'stateActive' : 'State' + index" @click="choose(items, indexs)">
							<div class="color-white roomBg" :class="isActive === indexs ? 'roomActive' : 'roomBg' + index">{{ items.Name
							}}
							</div>
							<div class="fs-40">{{ items.RoomNo }}</div>
							<div v-if="index === 0"> <span>{{ requestData.saleType === 0 ? '可住' : '可用' }}</span></div>
							<div v-if="index === 1">{{ items.UsedUserName }}</div>
							<div v-if="index === 2">脏房</div>
							<div v-if="index === 3">维修中</div>
							<div v-if="index === 4">待清扫</div>
						</div>
					</div>

					<div class="no-data pb-0" v-if="blank">
						<svg-icon icon-class="no-data" />
					</div>
				</van-list>
			</van-tab>
		</van-tabs>
		<div class="roomBtn fixed-bottom">
			<button v-if="active === 2" class="btn" @click="startClean">开始清扫</button>
			<button v-if="active === 4" class="btn" @click="cleanEnd">清扫完成</button>
			<button :class="(active === 1 || active === 3) ? 'look' : 'btn'" @click="lookSetting">查看房间配置</button>
			<button v-if="active === 0" class="btn opencode" @click="GetRoomQrCode">开门码</button>
			<button v-if="active === 1" class="empty" @click="goDetail">查看订单</button>
			<button v-if="active !== 1 && active !== 3" class="repair" @click="goRepair">维修</button>
			<button v-if="active === 3" class="repairEnd" @click="repairEnd">维修完成</button>
		</div>
		<!-- 开门码弹窗 -->
		<van-dialog v-model="posterShow" class="posterDiv" :showConfirmButton="false" width="80%">
			<div class="poster_main bg-white bblr-32 bbrr-32 mb-70">
				<SvgIcon icon-class="close" class="fs-60 closecss z-out color-dark" @goPage="closeQrcode" />
				<div class="qrcode" id="qrcode" ref="qrcode"><img class="is-200" :src="qrcode" /></div>
				<div class="mt-40">将此二维码对准设备，即可开门</div>
			</div>
			<div class="flex flex-sa-c">
				<div class="flex flex-d-c flex-center flex-1">
					<div class="flex flex-center down br-54">
						<svg-icon icon-class="down" class="fs-40 color-white" />
					</div>
					<span class="fs-36 lh-40 mt-16 color-white">长按二维码保存图片</span>
				</div>
			</div>
		</van-dialog>
	</div>
</template>

<script>
import TopSearch from 'components/Search'
import jrQrcode from "jr-qrcode";
import { GetBookRoomPageByStore, ProductRoomUpdateState, GetRoomQrCodeByRoomId } from 'api/teaHouse'
import SvgIcon from 'components/SvgIcon'
export default {
	components: {
		TopSearch, SvgIcon
	},
	props: {
	},
	data() {
		return {
			tabs: [
				{
					title: '空净',
					status: 0,
				},

				{
					title: '有客',
					status: 1,
				},
				{
					title: '脏房',
					status: 2,
				},
				{
					title: '故障',
					status: 4,
				},
				{
					title: '清扫',
					status: 5,
				},
			],
			active: 0,
			state: 1, // 0 全部
			oldRequestData: {},
			// 请求参数
			requestData: {
				PageIndex: 1,
				state: 0
			},
			finished: false,
			loading: false,
			blank: false, // 是否为空数据
			searchKey: '',
			roomList: [],
			isActive: 0,
			roomId: 0, //房间id
			title: '客房管理',
			orderId: 0,
			info: {},
			isLimit: false,
			posterShow: false, // 二维码弹窗显示
			qrcode: '', // 二维码图片地址
			ewm: '', // 点击开门码时存储所带数据生成二维码内容
		}
	},
	computed: {

	},
	watch: {

	},
	created() {
		if (this.$route.query.saleType !== undefined) {
			this.requestData.saleType = this.$route.query.saleType
			console.log(this.requestData.saleType, "传参")
		}
	},
	mounted() {

	},
	activated() {
		this.reset()
	},
	methods: {
		onClickRight() {
			if (this.isLimit) {
				this.$toast('您没有权限!')
				return
			}
			this.$router.push({
				path: 'addRoom',
				query: {
					saleType: this.requestData.saleType
				}
			})
		},
		lookSetting() {
			console.log(this.roomId, '房间id')
			if (this.roomId !== 0) {
				this.$router.push({
					path: 'addRoom/',
					query: {
						item: this.info,
						saleType: this.requestData.saleType
					}
				})
			}
		},
		tabChange(e) {
			console.log('e', e)
			this.states = e
			this.orderId = 0
			this.roomList = []
			if (e >= 3) {
				e++
			}
			this.roomId = 0
			this.isActive = 0
			this.requestData.PageIndex = 1
			this.requestData.state = e
			this.GetBookRoomPageByStore()

		},
		getRoomId() {
			if (this.roomList.length > 0) {
				this.roomId = this.roomList[0].ID
			}
		},
		getOrderId() {
			if (this.roomList.length > 0) {
				this.orderId = this.roomList[0].UsedOrderId
			}
		},
		// 重新请求
		reset() {
			this.requestData.PageIndex = 1
			this.requestData.PageSize = 10
			this.roomId = 0
			this.orderId = 0
			this.roomList = []
			if (this.requestData.saleType === '1') {
				this.title = '茶室管理'
				this.tabs = [
					{
						title: '空净',
						status: 0,
					},

					{
						title: '使用中',
						status: 1,
					},
					{
						title: '脏房',
						status: 2,
					},
					{
						title: '故障',
						status: 4,
					},
					{
						title: '清扫',
						status: 5,
					},
				]
			}
			// 获取列表
			this.GetBookRoomPageByStore()
		},
		// 上拉加载更多
		moreData() {
			this.requestData.PageIndex = this.requestData.PageIndex + 1
			this.GetBookRoomPageByStore()
		},
		GetBookRoomPageByStore() {
			const _this = this
			_this.loading = true
			GetBookRoomPageByStore(this.requestData).then(res => {
				if (res.State == 0) {
					_this.isLimit = true
					_this.finished = true
					_this.loading = false
					return
				}
				if (_this.requestData.PageIndex >= res.Data.TotalAmout) {
					_this.finished = true
				} else {
					_this.finished = false
				}
				_this.blank = false
				_this.loading = false
				if (res && res.Data && res.Data.Data.length > 0) {
					res.Data.Data.forEach(item => {
						item.show = false
						_this.roomList.push(item)
					})
				}
				if (_this.roomList.length > 0) {
					_this.info = _this.roomList[0]
				}
				_this.totalAmout = res.TotalAmout
				_this.scollRequest = true
				if (_this.scollTop > 0) {
					document.body.scrollTo(0, _this.scollTop)
				}
				if (this.roomId === 0) {
					this.getRoomId()
				}
				if (this.states === 1) {
					this.getOrderId()
				}
			})
		},

		search() {
			this.resetParams()
			this.requestData.searchKey = this.searchKey
			this.GetBookRoomPageByStore()
		},

		change(e) {
			this.radio = e
		},
		resetParams() {
			this.requestData.PageIndex = 1
			this.requestData.PageSize = 4
			this.roomList = []
			this.totalAmout = 0
			this.scollRequest = true
			this.scollTop = 0
			this.end = false
		},
		goRepair() {
			if (this.roomId !== 0) {
				ProductRoomUpdateState(this.roomId, 4).then(res => {
					if (res.Data) {
						this.reset()
					}
				})
			}
		},
		startClean() {
			if (this.roomId !== 0) {
				ProductRoomUpdateState(this.roomId, 5).then(res => {
					if (res) {
						this.reset()
					}
				})
			}
		},
		cleanEnd() {
			if (this.roomId !== 0) {
				ProductRoomUpdateState(this.roomId, 0).then(res => {
					if (res) {
						this.reset()
					}
				})
			}
		},
		repairEnd() {
			if (this.roomId !== 0) {
				ProductRoomUpdateState(this.roomId, 0).then(res => {
					if (res) {
						this.reset()
					}
				})
			}
		},
		choose(item, index) {
			this.info = item
			this.roomId = item.ID
			this.isActive = index
			if (this.active === 1) {
				this.orderId = item.UsedOrderId
			}
		},
		goDetail() {
			console.log(this.orderId, "订单id")
			if (this.orderId > 0) {
				this.$router.push('roomManageOrderDetail/' + this.orderId)
			}
		},
		// 开门码
		GetRoomQrCode() {
			if (this.roomId !== 0) {
				GetRoomQrCodeByRoomId({ roomId: this.roomId }).then(res => {
					if (res.State == 0) {
						return
					}
					this.ewm = res.Data
					this.$nextTick(() => {
						let imgBase64 = jrQrcode.getQrBase64(this.ewm, {//生成二维码
							padding: 10,   // 二维码四边空白（默认为10px）
							width: 200,  // 二维码图片宽度（默认为256px）
							height: 200,  // 二维码图片高度（默认为256px）
							correctLevel: QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
							reverse: false,        // 反色二维码，二维码颜色为上层容器的背景颜色
							background: "#ffffff",    // 二维码背景颜色（默认白色）
							foreground: "#000000"     // 二维码颜色（默认黑色）
						});  //options为配置对象，支持以下配置参数：
						this.qrcode = imgBase64
					})
					this.posterShow = true
				})
			}
		},
		// 为了防止重复生成二维码，使用置空
		closeQrcode() {
			this.posterShow = false
			setTimeout(function () {
				this.qrcode = ''
			}, 150)
		},
	}
}
</script>

<style lang="scss" scoped>
.noorder {
	margin: 118px 136px 0 134px;
	position: relative;

	span {
		position: absolute;
		top: 252px;
		left: 168px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
}

.order_search {
	display: flex;
	align-items: center;
}

.sift {
	width: 136px;
	height: 64px;
	background: #F2F3FC;
	border-radius: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sift img {
	width: 32px;
	height: 32px;
	margin-left: 10px;
}

.pos-r {
	height: 64px;
	background: #FFFFFF;
	border-radius: 41px;
	border: 1px solid $primary15 ;
	margin-right: 24px;
	padding: 0 10px;
}

.pos-a {
	background: $primary15;
	color: #fff;
	padding: 3px 20px;
	border-radius: 20px;
}

.van-cell {
	padding: 0 12px;
}

.van-cell::after {
	border-bottom: none
}

.full-height {
	height: 100vh;
	background: #fff;
}

/deep/.van-tab--active {
	color: $primary15 ;
}

/deep/.van-tabs__line {
	background: $primary15 ;
}

/deep/.van-field__body {
	width: 85%;
}

.State0 {
	border: 2px solid #73D13D;
}

.roomBg0 {
	background: #73D13D;
	width: 80%;
	margin: auto;
}

.State1 {
	border: 2px solid #FFC53D;
}

.roomBg1 {
	background: #FFC53D;
}

.State2 {
	border: 2px solid #FF7A45;
}

.roomBg2 {
	background: #FF7A45;
}

.State3 {
	border: 2px solid #D4380D;
}

.roomBg3 {
	background: #D4380D;
}

.State4 {
	border: 2px solid #36CFC9;
}

.roomBg4 {
	background: #36CFC9;
}

.stateActive {
	border: 2px solid #434C67;
}

.roomActive {
	background: #434C67;
}

.css-mdtxt {
	width: 104px;
	height: 40px;
	line-height: 40px;
	border-radius: 8px;
	text-align: center;
}

.roomList {
	display: flex;
	flex-wrap: wrap;
	padding: 44px 24px;
}

.room {
	width: calc(33.3% - 28px);
	margin-right: 20px;
}

.room:nth-child(3n) {
	margin-right: 0;
}

.roomBg {
	border-bottom-left-radius: 24px;
	border-bottom-right-radius: 24px;
}

.roomBtn {
	width: 100%;
	display: flex;
	justify-content: space-around;
	background: #fff;
	padding: 24px;
}

.repair {
	width: 224px;
	height: 72px;
	line-height: 72px;
	border-radius: 36px;
	background: $primary15;
	text-align: center;
	color: #fff;
	font-size: 28px;
	border: 2px solid $primary15;
}

.btn {
	width: 224px;
	height: 72px;
	line-height: 72px;
	border-radius: 36px;
	background: #fff;
	text-align: center;
	color: #333;
	font-size: 28px;
	border: 2px solid #333333;
}

.opencode {
	background: #d9534f;
	color: #fff;
	border: 2px solid #d9534f;
}

.empty,
.repairEnd {
	width: 324px;
	height: 80px;
	line-height: 80px;
	background: $primary15;
	border-radius: 56px;
	font-size: 28px;
	color: #fff;
}

.look {
	width: 324px;
	height: 80px;
	line-height: 80px;
	background: #fff;
	border-radius: 56px;
	font-size: 28px;
	color: #333;
	border: 2px solid #333333;
}

.closecss {
	top: 20px;
	right: 16px;
	width: 50px;
	height: 50px;
	position: absolute;
}

.poster_main {
	text-align: center;
	padding: 62px 60px 62px;

	img {
		width: 450px;
		height: 450px;
	}

	p {
		font-size: 28px;
		color: #F54F1B;
		padding: 30px 0;
		font-weight: 500;
	}

	div {
		font-size: 28px;
		color: #333;
		font-weight: 400;
	}
}

/deep/.posterDiv {
	background-color: transparent;
}

.down {
	width: 96px;
	// height: 96px;
	// background: #8AC24C;
}
</style>
